<template>
    <el-collapse>
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    跑马灯
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'piece',pull:'clone',put:false}"
                    item-key="id"
                >
                    <template #item="{ element }">
                        <div class="item">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import draggable from "vuedraggable";

export default {
    name: "CarouselIndex",
    data() {
        return {
            list: [
                { name: "www.itxst.com", id: 0 },
                { name: "www.baidu.com", id: 1 },
                { name: "www.google.com", id: 2 },
            ]
        }
    },
    methods: {
    },
    components: {
        draggable
    }
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {
        border: solid 1px rgb(19, 41, 239);
    }
    .chosenClass {
        background-color: blueviolet;
    }
}
</style>